<template>
    <div>
        <el-form label-position="left" label-width="100px" v-model="itemStyle">
            <el-divider content-position="center">边框</el-divider>
            <el-form-item label="颜色">
              <el-color-picker v-model="itemStyle.borderColor" show-alpha size="small" @active-change="itemStyleBorderColor"></el-color-picker>
            </el-form-item>
            <el-form-item  label="宽度">
                <el-input-number v-model="itemStyle.borderWidth" :min="0" :max="20" size="mini"/>
            </el-form-item>
            <el-form-item  label="类型">
               <el-select v-model="itemStyle.borderType" placeholder="solid" size="mini">
                <el-option label="————————" value="solid"/>
                <el-option label="------------------------" value="dashed"/>
                <el-option label="························" value="dotted"/>
              </el-select>
            </el-form-item>
            <el-divider content-position="center">阴影</el-divider>
            <el-form-item  label="颜色">
              <el-color-picker v-model="itemStyle.shadowColor" show-alpha size="small" @active-change="itemStyleShadowColor"></el-color-picker>
            </el-form-item>
            <el-form-item  label="模糊">
              <el-input-number v-model="itemStyle.shadowBlur" :min="0" :max="20" size="mini"></el-input-number>
            </el-form-item>
            <el-form-item  label="水平偏移">
              <el-input-number v-model="itemStyle.shadowOffsetX" :min="0" :max="20" size="mini"></el-input-number>
            </el-form-item>
            <el-form-item  label="垂直偏移">
              <el-input-number v-model="itemStyle.shadowOffsetY" :min="0" :max="20" size="mini"></el-input-number>
            </el-form-item>
        </el-form>
        <el-form label-position="left" label-width="100px" v-model="itemStyle">
        <el-divider content-position="center"><strong>强调样式</strong></el-divider>
        <el-divider content-position="center">边框</el-divider>
            <el-form-item label="颜色">
              <el-color-picker v-model="emphasis.itemStyle.borderColor" show-alpha size="small" @active-change="itemStyleBorderColor"></el-color-picker>
            </el-form-item>
            <el-form-item  label="宽度">
                <el-input-number v-model="emphasis.itemStyle.borderWidth" :min="0" :max="20" size="mini"/>
            </el-form-item>
            <el-form-item  label="类型">
               <el-select v-model="emphasis.itemStyle.borderType" placeholder="solid" size="mini">
                <el-option label="————————" value="solid"/>
                <el-option label="------------------------" value="dashed"/>
                <el-option label="························" value="dotted"/>
              </el-select>
            </el-form-item>
            <el-divider content-position="center">阴影</el-divider>
            <el-form-item  label="颜色">
              <el-color-picker v-model="emphasis.itemStyle.shadowColor" show-alpha size="small" @active-change="itemStyleShadowColor"></el-color-picker>
            </el-form-item>
            <el-form-item  label="模糊">
              <el-input-number v-model="emphasis.itemStyle.shadowBlur" :min="2" :max="20" size="mini"></el-input-number>
            </el-form-item>
            <el-form-item  label="水平偏移">
              <el-input-number v-model="emphasis.itemStyle.shadowOffsetX" :min="0" :max="20" size="mini"></el-input-number>
            </el-form-item>
            <el-form-item  label="垂直偏移">
              <el-input-number v-model="emphasis.itemStyle.shadowOffsetY" :min="0" :max="20" size="mini"></el-input-number>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>

export default {
  data: function () {
    return {
    }
  },
  methods: {
    itemStyleBorderColor  (val) {
      this.itemStyle.borderColor = val
    },
    itemStyleShadowColor  (val) {
      this.itemStyle.shadowColor = val
    },
    emphasisItemStyleBorderColor (val) {
      this.emphasis.itemStyle.borderColor = val
    },
    emphasisItemStyleShadowColor  (val) {
      this.emphasis.itemStyle.shadowColor = val
    },
    labelColor (val) {
      this.label.color = val
    }
  },
  computed: {
    itemStyle () {
      return this.$store.state.layout[this.$store.state.activeArrayIndex].SlideContent[this.$store.state.insideActiveArrayIndex].itemContent.detail.itemStyle
    },
    emphasis () {
      return this.$store.state.layout[this.$store.state.activeArrayIndex].SlideContent[this.$store.state.insideActiveArrayIndex].itemContent.detail.emphasis
    }
  },
  watch: {
  },
  components: {
  }
}
</script>

<style scoped>
    .el-form-item {
        margin-bottom: 0px
    }
</style>
